import React from 'react';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import { Row, Col } from 'antd';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { getChildrenToRender } from './utils';
import { Parallax } from 'rc-scroll-anim';

type P = {
  id: string
}

const v1img = [
  {
    logo: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/1_1.png',
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/1_2.png',
  },
  {
    logo: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/2_1.png',
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/2_2.png',
  },
  {
    logo: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/3_1.png',
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/3_2.png',
  },
  {
    logo: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/4_1.png',
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/4_2.png',
  },
  {
    logo: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/5_1.png',
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/5_2.png',
  },

]

const v2img = [
  {
    logo: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/6_1.png',
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/6_2.png',
  },
  {
    logo: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/7_1.png',
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/7_2.png',
  },
  {
    logo: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/8_1.png',
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/8_2.png',
  },
  {
    logo: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/9_1.png',
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/9_2.png',
  },
  {
    logo: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/10_1.png',
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/10_2.png',
  },
  {
    logo: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/11_1.png',
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/11_2.png',
  },


]

const v3img = [
  {
    logo: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/12_1.png',
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/12_2.png',
  },
  {
    logo: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/13_1.png',
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/13_2.png',
  },
  {
    logo: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/14_1.png',
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/14_2.png',
  },
  {
    logo: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/15_1.png',
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/15_2.png',
  },
  {
    logo: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/16_1.png',
    img: 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/logo_school/16_2.png',
  },


]

function Content6(props: P) {

  function onMouseOver(e: React.MouseEvent<HTMLImageElement, MouseEvent>, key: string) {
    if (e) {
      (e.target as HTMLImageElement).src = key
    }
  }

  return (
    <div id={props.id} className="container-fluid" >
      <div className="row">
        <div className="col c6">
          {v1img.map((e, key) => {
            return (
              <Parallax
                animation={{
                  duration: 1000,
                  playScale: [0.1, 0.2],
                }}
                always={false}
                className="code-box-shape"
                key={key + '_1'}
              >
                <div className="c6-1 cu" >
                  <img
                    onMouseOver={(t) => onMouseOver(t, e.img)}
                    onMouseOut={(t) => onMouseOver(t, e.logo)}
                    src={e.logo} alt="" />
                </div>
              </Parallax>
            )
          })}
        </div>
      </div>
      <div className="row">
        <div className="col c6 c6-c">
          {v2img.map((e, key) => {
            return (<Parallax
              animation={{
                duration: 1000,
                playScale: [0.5, 0.8],
              }}
              always={false}
              className="code-box-shape"
              key={key + '_2'}
            >
              <div className="c6-2 cu" >
                <img
                  onMouseOver={(t) => onMouseOver(t, e.img)}
                  onMouseOut={(t) => onMouseOver(t, e.logo)}
                  src={e.logo} alt="" />
              </div>
            </Parallax>
            )
          })}
        </div>
      </div>
      <div className="row">
        <div className="col c6">
          {v3img.map((e, key) => {
            return (
              <Parallax
                animation={{
                  duration: 1000,
                  playScale: [0.5, 0.8],
                }}
                always={false}
                className="code-box-shape"
                key={key + '_3'}
              >
                <div className="c6-3 cu">
                  <img
                    onMouseOver={(t) => onMouseOver(t, e.img)}
                    onMouseOut={(t) => onMouseOver(t, e.logo)}
                    src={e.logo} alt="" />
                </div>
              </Parallax>
            )
          })}
        </div>
      </div>
    </div>
  );
}

export default Content6;
